@using System.Web.Script.Serialization

@{
    Layout = "~/Views/Shared/_contentLayout.cshtml";
}

<style>
    .formLabel 
    {
        float: left;
        display: block;
        text-align: right;
        width: 100px;
        font-weight: bold;
    }
    .formField
    {
        float: left;
        margin: -2px 2px 20px 10px;
    }
    .fieldInfo
    {
        display: block;
        font-size: 11px;
    }
    .innerDiv
    {
        width: 800px;
        padding: 10px 2px 2px 2px;
    }
    .outerDiv
    {
        float: left;
        width: 200px;
    }
    .separator
    {
        background-color: gray;
        color: White;
        width: 600px;
        padding: 2px;
        margin-bottom: 8px;
        margin-top: -20px;
        font-weight: bold;
    }
    .separatorLink
    {
        float: right;
        margin-left: 8px;
    }
    .multiSelect
    {
    }
</style>

@RenderBody()

<div id="fieldMetadata" style="display:none">
    <div id="textField">
        <input type="text" />
    </div>

    <div id="textAreaField">
        <textarea rows="10" cols="50"></textarea>
    </div>

    <div id="dropDownField">
        <select></select>
    </div>

    <div id="multiSelectField">
        <div class="multiSelect"></div>
    </div>

    <div id="separator">
        <div class="separator"></div>
    </div>

    <div id="formField">
            <label class="formLabel"></label>
            <div class="formField" style="width: 400px;">
            </div>
            <br style="clear: both"/>
    </div>
</div>

<div id="formTemplate">
    <a href="javascript: save()" style="float: right;">Save</a>
    <br style="clear: both"/>

    <div style="float: left; width: 100px">&nbsp;</div>
    <div class="outerDiv">
        <div class="innerDiv" id="fields">
        </div>
    </div>
</div>